import React, { useState, useEffect } from 'react'
import cityData from "../cityData";
import {
    Form,
    Input,
    Button,
    Table,
    Space,
    Select,
    Switch,
    message,
    Popconfirm,
} from 'antd';
import request from "../../utils/request";

import "./Group.css"

const Group = () => {
    const [city, setCity] = useState([]);
    const [county, setCounty] = useState([]);
    const [Grouplist, setGroup] = useState([]);
    useEffect(() => {
        getter()
    }, [])

    //获取
    const getter = async () => {
        const res = await request({
            url: "/api/GetGroup",
            method: "get",
        })
        if (res.code === 200) {
            setGroup(res.data)
        }
    }
    const onFinish = async (values) => {
        if (!values.name) values.name = "";
        if (!values.city) values.city = "";
        if (!values.county) values.county = "";
        if (!values.province) values.province = "";
        if (!values.state) values.state = "";
        if (!values.word) values.word = "";
        let res = await request({
            url: '/api/searchGroup',
            method: "get",
            params: {
                ...values,
            }
        })
        if (res.code === 200) {
            setGroup(res.data)
        }
    }
    //城市
    const City = (changedValues) => {
        if (changedValues.province) {
            setCity([]);
            setCounty([]);
            const cityList = cityData.filter(item => {
                if (item.name === changedValues.province) {
                    return { ...item }
                }
            })
            const newcity = { ...cityList };
            setCity([...newcity[0].cityList]);
        } else if (changedValues.city) {
            setCounty([]);
            const countyList = city.filter(item => {
                if (item.name === changedValues.city) {
                    return { ...item }
                }
            })
            const newcounty = { ...countyList };
            setCounty([...newcounty[0].areaList])
        }
    }
    //表格
    const { Column } = Table;
    const { Option } = Select;
    //状态
    const State = async (text) => {
        let res = await request({
            url: "/api/stateGroup",
            method: "put",
            data: {
                id: text.id
            }
        })
        message.success(res.message);
        getter();
    }
    //删除
    const Delete = async (text) => {
        const res = await request({
            url: "/api/DeleteGroup",
            method: "delete",
            params: { id: text.id },
        })
        message.success(res.message);
        getter();
    }
    return (
        <div className="Group">
            <div className="GroupHeader">
                团购管理
            </div>
            <div className="GroupMain">
                <div className="GroupTop">
                    <Form name="complex-form" onFinish={onFinish} onValuesChange={City} >
                        <Form.Item
                            name="name"
                            label="搜索:"
                        >
                            <Input placeholder="团购名称" />
                        </Form.Item>
                        <Form.Item
                            name="state"
                            label="状态:"
                        >
                            <Select
                                placeholder="请选择"
                            >
                                <Option value="">请选择</Option>
                                <Option value="1">开启</Option>
                                <Option value="0">关闭</Option>
                            </Select>
                        </Form.Item>
                        <Form.Item>
                            <Input.Group compact>
                                <Form.Item
                                    name="province"
                                    noStyle
                                >
                                    <Select placeholder="请选择省份" style={{ width: '100%' }}>
                                        {
                                            cityData.length && cityData.map((item, index) => {
                                                return <Option value={item.name} key={index}>{item.name}</Option>
                                            })
                                        }
                                    </Select>
                                </Form.Item>
                            </Input.Group>
                        </Form.Item>
                        <Form.Item>
                            <Input.Group compact>
                                <Form.Item
                                    name="city"
                                    noStyle
                                >
                                    <Select placeholder="请选择城市" style={{ width: '100%' }}>
                                        {
                                            city.length && city.map((item, index) => {
                                                return <Option value={item.name} key={index}>{item.name}</Option>
                                            })
                                        }
                                    </Select>
                                </Form.Item>
                            </Input.Group>
                        </Form.Item>
                        <Form.Item>
                            <Input.Group compact>
                                <Form.Item
                                    name="county"
                                    noStyle
                                >
                                    <Select placeholder="请选择区县" style={{ width: '100%' }}>
                                        {
                                            county.length && county.map((item, index) => {
                                                return <Option value={item} key={index}>{item}</Option>
                                            })
                                        }
                                    </Select>
                                </Form.Item>
                            </Input.Group>
                        </Form.Item>
                        <Form.Item
                            name="word"
                        >
                            <Input placeholder="请输入关键字" />
                        </Form.Item>
                        <Form.Item label=" " colon={false}>
                            <Button htmlType="submit">
                                查询
                            </Button>
                        </Form.Item>
                    </Form>
                </div>
                <div className="Groupmain">
                    <Table dataSource={Grouplist} bordered>
                        <Column title="序号" dataIndex="key" key="key" align="center" />
                        <Column title="图片" dataIndex="img" key="img" align="center" />
                        <Column title="楼盘名称" dataIndex="name" key="name" align="center" />
                        <Column title="楼盘地址" dataIndex="site" key="site" align="center" />
                        <Column title="发起人" dataIndex="peop" key="peop" align="center" />
                        <Column title="起始时间" dataIndex="date" key="date" align="center" />
                        <Column title="团购状态" dataIndex="type" key="type" align="center" />
                        <Column
                            title="状态"
                            dataIndex="tags"
                            key="tags"
                            align="center"
                            render={(text, record) => (
                                <>
                                    {
                                        <Switch checkedChildren="开启" unCheckedChildren="关闭" checked={record.state} onClick={() => State(record)} />
                                    }
                                </>
                            )}
                        />
                        <Column
                            title="操作"
                            key="action"
                            render={(text, record) => (
                                <Space>
                                    <Popconfirm
                                        title="是否要删除？请再次确定"
                                        onConfirm={() => Delete(record)}
                                        okText="Yes"
                                        cancelText="No"
                                    >
                                        <a>删除</a>
                                    </Popconfirm>
                                </Space>
                            )}
                            align="center" />
                    </Table>
                </div>
            </div>
        </div>
    )
}

export default Group
